<template>
  <div class="nav">
    <div class="left">
      <ul>
        <li><i class="el-icon-s-home"></i><router-link to="/" >首页</router-link></li>
        <li><i class="el-icon-s-marketing"></i><router-link to="/hotTopic" >热门</router-link></li>
        <li><i class="el-icon-s-comment"></i><router-link to="/Mymes" >动态</router-link></li>
        <li><i class="el-icon-s-claim"></i><router-link to="/" >关注</router-link></li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <li v-for="(data, i) in majorList" :key="i" @click="majorClick(i)">{{ data }}</li>
        <li @click="majorClick(0)">更多<i class="el-icon-d-arrow-right"></i></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      majorList: [
        "公共",
        "哲学",
        "经济",
        "法学",
        "教育",
        "文学",
        "历史",
        "理学",
        "工学",
        "农业",
        "医学",
        "军事",
        "管理",
        "艺术",
      ],
    };
  },
  name: "Nav",
  methods: {
    majorClick(num){
      this.$router.push({ path: "/Search", query: { m_type: num } });
    }
  },
};
</script>

<style scoped>
.nav {
  display: flex;
  padding: 20px;
  background-color: #fff;
}
ul {
  display: flex;
  padding: 0 20px;
  border-right: 1px solid #c0c4cc;
}
.left ul li {
  margin: 0 5px;
  cursor: pointer;
}

.left ul li > i {
  display: block;
  font-size: 40px;
  border-radius: 50%;
}
.left ul li:nth-of-type(1) > i {
  color: #67c23a;
  border: 2px solid #67c23a;
}
.left ul li:nth-of-type(2) > i {
  color: #f56c6c;
  border: 2px solid #f56c6c;
}
.left ul li:nth-of-type(3) > i {
  color: #409eff;
  border: 2px solid #409eff;
}
.left ul li:nth-of-type(4) > i {
  color: #e6a23c;
  border: 2px solid #e6a23c;
}
.left ul li > a {
  display: block;
  tab-size: 18px;
  transition: 0.3s;
  text-align: center;
}
.left ul li:hover >a{
  color: #409eff;
}
.right ul {
  flex-wrap: wrap;
  padding: 0 20px;
}
.right ul li {
  padding: 5px 10px;
  letter-spacing: 5px;
  cursor: pointer;
  margin: 0 20px;
  border-radius: 5px;
  transition: 0.3s;
}
.right ul li:hover {
  background-color: #409eff;
  color: white;
}
</style>
